/**
 *  每调用一次 FuncToast ，真正生成的是这个组件
 * 
 */
import { useEffect } from "react"
import "./toastitem.less"

interface IProp {
  data: IToast & { id: number },
  top: number,
  onDestroy: (id: number) => void
}

export default function ToastItem({ data, top, onDestroy }: IProp) {
  // 定时器， 过2秒后，把自己删除
  useEffect(() => {
    setTimeout(() => {
      // 把自己删除
      onDestroy(data.id)
    }, 2000);
  }, [])
  return <div style={{ top: top }} className={['toast-item', data.type].join(' ')}>{data.message} , {data.type} , {data.id}</div>
}